<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            width: 560px;
            line-height: 40px;
            background-color: #000;
            color: #fff;
            margin: auto;
        }
        li{
            width: 80px;
            text-align: center;
        }

    </style>
</head>
<body>


    <input type="date">
    <input type="number">




    <!-- <h2>2022:7-18 14:27:27</h2> -->
    <p>
        <span id="prev">&lt;</span>
        <span id="next">&gt;</span>
    </p>
    <h3 id="h">2022-7</h3>
    <ul>
        <li>星期一</li>
        <li>星期er</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
    <ul id="list"></ul>


    <script>

        // 日历
        //   三部分组成(上个月 ， 本月，下个月)
        //   总共42天
        //    写了三个函数    --- 封装一个功能

        //    本月的天数  1-maxDay

        //    上个月   跟本月的第一天是星期几有关系   上个月显示的第一天 = maxDay - week + 2 ;  bug week=0  week=7

        //    下个月   42 - 上个月 - 本月的天数



        // 页面功能
        //   1 渲染li   showLi()
        //   2 上下翻页  
        //   3 显示年月  showYear()


        //    引用类型地址共享的问题   
        //     实例化时间的  new Date(时间对象)




        var date = new Date() ;
        var oPrev = document.getElementById('prev') ;
        var oNext = document.getElementById('next') ;

        showLi() ;
        showYear() ;

        
        oPrev.onclick = function() {
            date.setDate(-1) ;
            showLi() ;
            showYear()
        }

        
        oNext.onclick = function() {
            date.setDate(32) ;
            showLi() ;
            showYear()
        }


        function showYear() {
            var y = date.getFullYear() ;
            var m = date.getMonth() + 1;
            var oH = document.getElementById('h') ;
            oH.innerHTML = y + '-' + m
        }
        

        function showLi() {
            
            var ben = f2(date) ;
            var xia = f3(date) ;
            var shang = f1(date) ;

            var html = '' ;
            for(var i in shang) {
                html += '<li style="color:gray">' + shang[i] + '</li>'
            }

            for(var i in ben) {
                // 加一个判断
                var y1 = date.getFullYear() ;
                var m1 = date.getMonth() ;

                var dd = new Date() ;
                var d2 = dd.getDate() ;
                var y2 = dd.getFullYear() ;
                var m2 = dd.getMonth() ;

                if(ben[i] === d2 && y1 === y2  && m1 === m2) {
                    html += '<li style="color:red;background:yellow">' + ben[i] + '</li>'
                } else {
                    html += '<li style="color:red">' + ben[i] + '</li>'
                }
                
            }

            for(var i in xia) {
                html += '<li style="color:gray">' + xia[i] + '</li>'
            }

            var oUl = document.getElementById('list') ;
            oUl.innerHTML = html ;
        }





        // 本月的天数
        function f2(t) {
            var date = new Date(t) ;    // 可以求任意月份的日历
            // 下个月的第0天
            date.setDate(32) ;
            date.setDate(0) ;
            var maxDay = date.getDate() ;
            var arr = [] ;
            for(var i = 1 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }


         // shang月的天数
         function f1(t) {
            var date = new Date(t) ;    // 可以求任意月份的日历

            date.setDate(1) ;   // 本月的第一天
            var w = date.getDay() ;
            w = w > 0 ? w : 7 ;    // 本月的第一天是星期天  就按照7来算

            // 本月的第0天
            date.setDate(0) ;
            var maxDay = date.getDate() ;
            var arr = [] ;
            for(var i = maxDay - w + 2 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }


        // 下个月  

        //     先执行本月的天数，再执行上个月的天数  t 
        function f3() {
            var arr = [] ;
            var ben = f2(date) ;   
            var shang = f1(date) ;    
            for(var i = 1 ; i <= 42 - shang.length - ben.length ; i++) {
                arr.push(i) ;
            }
            return arr ;
        }


       






        
    </script>
    
</body>
</html>